<template>
  <div class="search">
    <div class="header">
      <router-link to="/index" class="ret iconfont icon-fanhui"></router-link>
      <div class="shell">
        <div class="search iconfont icon-sousuo"></div>
        <input
          @keyup.enter="jump(which)"
          class="setSearch"
          type="text"
          placeholder="输入城市/景点/游玩主题"
          v-model="which"
          ref="inputName"
        />
      </div>
    </div>
    <div class="hot">
      <div class="title">热门景区</div>
      <!-- <div class="lists">
        <div>广州塔</div>
        <div>珠江夜游</div>
        <div>长隆野生动物世界</div>
        <div>长隆欢乐世界</div>
        <div>广州融创雪世界</div>
      </div> -->
      <div class="lists" v-for="(item,index) in elo" :key="index">
          <div @click="upto(index)">
              {{item.name}}
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      which: "",
      elo : [
        {name:"广州塔",rou:"town"},
        {name:"珠江夜游",rou:"river"},
        {name:"长隆野生动物世界",rou:"detail"},
        {name:"长隆欢乐世界",rou:"happy"},
        {name:"广州融创雪世界",rou:"snow"},
      ]
    };
  },
  created(){
    this.$nextTick(() => {
      this.$refs.inputName.focus()
    })
  },
  components: {},
  methods: {
    jump(which) {
      let elo = [
        {name:"广州融创雪世界",rou:"snow"},
        {name:"白水寨",rou:"white"},
        {name:"珠江夜游",rou:"river"},
        {name:"广州塔",rou:"town"},
        {name:"长隆野生动物世界",rou:"detail"},
        {name:"长隆欢乐世界",rou:"happy"}
      ];
      for(let i = 0;i < elo.length;i++){
        if(which == elo[i].name){
            this.$router.push({
              name: elo[i].rou,
            });
        }
      }
      
    },
    upto(index){
      this.jump(this.elo[index].name);
    }
  },
};
</script>

<style lang="less">
.search {
  .header {
    margin: 10px;
    height: 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: white;
    .ret {
      color: gray;
    }
    .shell {
      position: relative;
      .search {
        position: absolute;
        top: 6px;
        left: 12px;
        color: gray;
      }
      .setSearch {
        color: black;
        font-size: 14px;
        width: 270px;
        padding: 3px 0;
        padding-left: 32px;
        height: 20px;
        line-height: 20px;
        outline: none;
        border: 1px solid white;
        border-radius: 30px;
        background: rgb(240, 242, 245);
      }
    }
  }
  .hot {
    .title {
      text-align: left;
      font-weight: bold;
      padding-left: 20px;
    }
    .lists {
      // display: flex;
      // flex-wrap: wrap;
      // align-items: center;
      // justify-content: space-evenly;
      // height: 80px;
      margin: 0 10px;
      margin-top: 20px;
      div {
        font-size: 14px;
        float: left;
        margin: 10px 10px 0;
        background-color: #f4f4f4;
        border-radius: 30px;
        padding: 5px 10px;
      }
    }
  }
}
</style>
